<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{width:400px;height: 400px;border: solid 1px black;}
    .cont .box{height: 300px;border-bottom: solid 1px black;overflow: auto;}
    .box p{max-width: 300px;padding: 4px;margin: 4px;border-radius: 4px;clear: both;}
    .box p:nth-child(2n){float: left;background: #6f6;}
    .box p:nth-child(2n-1){float: right;background: #66f;color: #fff;}
  </style>
</head>
<body>
  <div class="cont">
    <div class="box">
    </div>
    <div class="form">
      <textarea class="txt"></textarea>
      <input type="button" value="发送" class="send">
    </div>
  </div>
</body>
<script>
  var txt = document.querySelector(".txt");
  var send = document.querySelector(".send");
  var box = document.querySelector(".box");

  send.onclick = function(){
    // 创建元素
    var p = document.createElement("p");
    // 设置内容
    p.innerText = txt.value;
    // 插入指定容器
    box.appendChild(p);
    // 清空输入框
    txt.value = "";
    // 设置容器的滚动条位置，为最大位置
    box.scrollTop = box.scrollHeight;
  }
</script>
</html>